<template>
    <div class="container">
        <van-nav-bar title="一次性告知" left-arrow @click-left="onClickLeft" />
        <div class="container-step">
            <Steps :currentSwipeItem="0"></Steps>
        </div>
        <div class="container-content">
            <div class="container-content-title">
                <span>实施主体</span>
                <span>行政审批服务局</span>
            </div>
            <div class="container-content-list">
                <div class="container-content-list-item">
                    <span>共同实施部门：</span>
                    <span>无</span>
                </div>

                <div class="container-content-list-item">
                    <span>承办机构：</span>
                    <span style="display: block;line-height: 25px;">烟台经济技术开发区行政审批服务局社会事业处</span>
                </div>

                <div class="container-content-list-item">
                    <span>办理情况公开范围：</span>
                    <span>无</span>
                </div>

                <div class="container-content-list-item">
                    <span>法定期限：</span>
                    <span>20个工作日</span>
                </div>

                <div class="container-content-list-item">
                    <span>承诺期限：</span>
                    <span>0个工作日</span>
                </div>

                <div class="container-content-list-item">
                    <span>是否收费：</span>
                    <span>否</span>
                </div>

                <div class="container-content-list-item">
                    <span>咨询电话：</span>
                    <span>0535-6119592</span>
                </div>

                <div class="container-content-list-item">
                    <span>是否可以在线申报：</span>
                    <span>是</span>
                </div>

                <div class="container-content-list-item">
                    <span>实施依据内容摘要：</span>
                    <span>无</span>
                </div>

                <div class="container-content-list-item">
                    <a href="#"><van-cell is-link title="收费(征收)的标准和依据" /></a>
                </div>

                <div class="container-content-list-item">
                    <a href="#"><van-cell is-link title="受理时间和地点" /></a>
                </div>

                <div class="container-content-list-item">
                    <a href="#"><van-cell is-link title="实施依据" /></a>
                </div>

                <div class="container-content-list-item">
                    <a href="#"><van-cell is-link title="办理流程" /></a>
                </div>

                <div class="container-content-list-item">
                    <a href="#"><van-cell is-link title="申办材料" /></a>
                </div>

                <div class="container-content-list-item">
                    <a href="#"><van-cell is-link title="受理条件" /></a>
                </div>

                <div class="container-content-list-item">
                    <span>服务对象：</span>
                    <span>企业法人</span>
                </div>

                <div class="container-content-list-item">
                    <span>是否支持帮办代办：</span>
                    <span>是</span>
                </div>

                <div class="container-content-list-item">
                    <span>是否支持物流快递：</span>
                    <span>是</span>
                </div>

                <div class="container-content-list-item">
                    <span>办理形式：</span>
                    <span>窗口办理、网上办理、快递申请</span>
                </div>

                <div class="container-content-list-item">
                    <span>送达方式：</span>
                    <span>窗口领取、邮寄送达</span>
                </div>

                <div class="container-content-list-item">
                    <span>法定时限：</span>
                    <span>20个工作日</span>
                </div>

                <div class="container-content-list-item">
                    <span>承办期限：</span>
                    <span>即办</span>
                </div>

                <div class="container-content-list-item">
                    <span>是否收费：</span>
                    <span>否</span>
                </div>

                <div class="container-content-list-item">
                    <span>联办机构：</span>
                    <span>暂无</span>
                </div>

                <div class="container-content-list-item">
                    <span>办理方式：</span>
                    <span>自办件</span>
                </div>

                <div class="container-content-list-item">
                    <span>办结结果类型：</span>
                    <span>证照</span>
                </div>

                <div class="container-content-list-item">
                    <span>办结结果名称：</span>
                    <span>《人力资源服务许可证》</span>
                </div>

                <div class="container-content-list-item">
                    <span>网版深度：</span>
                    <span>全程网办</span>
                </div>
            </div>
        </div>


        <div class="container-content">
            <div class="container-content-title2">
                <span>申请材料：</span>
                <span style="color: red">( “*”项为必要材料 )</span>
            </div>
            <div class="container-content-list">
                <div class="starTitle">
                    <span style="color: red;margin-right: 5px;">*</span>
                    <span class="title_item">公共场所卫生许可申请表</span>
                </div>
                <div class="container-content-list-item">

                    <van-image width="100" height="100" fit="contain" position="center"
                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                </div>

                <div class="starTitle">
                    <span style="color: red;margin-right: 5px;">*</span>
                    <span class="title_item">卫生许可证正、副本</span>
                </div>
                <div class="container-content-list-item">

                    <van-image width="100" height="100" fit="contain" position="center"
                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                    <van-image style="margin-left: 10px" width="100" height="100" fit="contain" position="center"
                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                </div>

                <div class="starTitle">
                    <span style="color: red;margin-right: 5px;">*</span>
                    <span class="title_item">法定代表人(负责人)身份证复印件</span>
                </div>
                <div class="container-content-list-item">

                    <van-image width="100" height="100" fit="contain" position="center"
                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                </div>

                <div class="starTitle">
                    <span style="color: red;margin-right: 5px;">*</span>
                    <span class="title_item">委托他人办理的需提供《委托书》</span>
                </div>
                <div class="container-content-list-item">

                    <van-image width="100" height="100" fit="contain" position="center"
                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                </div>

                <div class="starTitle">
                    <span style="color: red;margin-right: 5px;">*</span>
                    <span class="title_item">营业执照</span>
                </div>
                <div class="container-content-list-item">

                    <van-image width="100" height="100" fit="contain" position="center"
                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                </div>

                <div class="container-content-list-item">
                    <span>咨询方式：</span>
                    <span>全程网办</span>
                </div>

                <div class="container-content-list-item">
                    <span>咨询窗口：</span>
                    <span style="display: block;line-height: 25px;">山东省烟台经济技术开发区金沙江路83号烟台开发区政务服务中心A座2楼37号窗口</span>
                </div>

                <div class="container-content-list-item">
                    <span>电话咨询：</span>
                    <span>0535-6119437</span>
                </div>

                <!-- <div class="container-content-list-item">
                    <span>网络咨询：</span>
                    <span><a href="http://ytjjzwfw.sd.gov.cn/kfq/icity/guestbook/consult" target="_blank"
                            rel="noopener noreferrer">http://ytjjzwfw.sd.gov.cn/kfq/icity/guestbook/consult</a></span>
                </div> -->
            </div>
        </div>

        <div class="container-agreeMent"><van-checkbox v-model="checked"
                shape="square">我已阅读并知晓上述“一次性告知”内容</van-checkbox></div>


        <div class="container-confirm">
            <van-button style="width: 85%;margin-bottom: 10px;" type="primary" @click="nextStep">
                开始申报
            </van-button>
            <van-button style="width: 85%;margin-bottom: 10px;" plain type="primary" @click="goAppointment">
                寄递预约
            </van-button>
        </div>

    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const active = ref(0)
const checked = ref(true);
const router = useRouter()
const onClickLeft = () => history.back();
const nextStep = () => {
    router.push({
        name: 'EntryInfo',
    })
}
const goAppointment = () => {
    router.push({
        name: 'Appointment'
    })
}
</script>

<style lang="scss" scoped>
.container {
    &-step {
        width: 100%;
        height: 80px;
        background-color: #fff;
    }

    .van-cell {
        padding: 0;
        height: 45px;
        line-height: 45px;
        display: flex;
        align-items: center;
        font-size: 16px;
    }

    height: auto;
    width: 100%;

    &-content {
        height: auto;
        box-sizing: border-box;
        padding: 0 10px;
        // background-color: #fff;
        border-radius: 10px;

        &-title {
            // width: 100%;
            height: 45px;
            line-height: 45px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            background-color: #f5f5f5;
        }

        &-title2 {
            text-align: left;
            margin: 10px 0;
            width: 100%;
            font-weight: bold;
        }

        &-list {
            padding-top: 5px;
            border-radius: 10px;
            height: auto;
            width: 100%;
            background-color: #fff;

            &-item {
                padding: 0 5px;
                text-align: left;
                height: auto;
                line-height: 44px;
                border-bottom: 1px solid #efefef;
            }

            .starTitle {
                margin-top: 5px;
                margin-left: 5px;
                text-align: left;
                color: #666;
            }
        }
    }

    &-agreeMent {
        margin: 10px 10px;
    }

}
</style>